---
layout: page
---

{% for post in paginator.posts %}
<hr style="visibility: hidden;">
<div class="preview-card mdl-card mdl-shadow--2dp">
    <div class="mdl-card__title" style="height: 176px;{% if post.img %}background: url('{{ post.img }}'){% else %}background: url('https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture'){% endif %} center / cover;">
        <h2 class="card-title mdl-card__title-text mdl-color-text--white">{{ post.title }}</h2>
    </div>
    <div class="mdl-card__supporting-text">{{ post.content | strip_html | truncate:200 }}</div>
    <div class="mdl-card__actions mdl-card--border">
        <div class="mdl-grid mdl-grid--no-spacing">
            <p class="mdl-cell--10-col-desktop mdl-cell--6-col-tablet mdl-cell--3-col-phone mdl-cell">
                <a class="mdl-button">{% if post.author %}{{ post.author }}{% endif %} on
                    {{ post.date | date: "%B %-d, %Y" }}</a>
                </p>
            <a class="read-button mdl-cell--2-col-desktop mdl-cell--2-col-tablet mdl-cell--1-col-phone mdl-cell mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{{ post.url | prepend: site.baseurl }}">阅读</a>
        </div>
        
    </div>
</div>
{% endfor %}

<!-- Pager -->
{% if paginator.total_pages > 1 %}
<div class="pager mdl-grid mdl-grid--no-spacing">
    {% if paginator.previous_page %}
    <a class="previous-button mdl-cell--2-col-desktop mdl-cell--2-col-tablet mdl-cell--1-col-phone mdl-cell mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="{{ post.url | prepend: site.baseurl }}">上一页</a>
    {% endif %}
    <div class="mdl-cell mdl-cell--8-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone"></div>
    {% if paginator.next_page %}
    <a class="next-button mdl-cell--2-col-desktop mdl-cell--2-col-tablet mdl-cell--1-col-phone mdl-cell mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
        href="{{ post.url | prepend: site.baseurl }}">下一页</a>
        {% endif %}
</div>
{% endif %}